<template>
        <div class="top-image fullscreen-top"></div>
    <div class="research-direction">
        <div class="title">
            <h1>研究方向</h1>
        </div>
        <nav>
            <div class="inner">
                <div class="list">
                    <!-- 添加 :key 以消除警告 -->
                    <div
                        :key="item.directionCode"
                        :class="['item', directionCode === item.directionCode ? 'active' : '']"
                        v-for="item in direction"
                        @click="handleClickDirection(item)"
                    >
                        {{ item.directionName }}
                    </div>
                </div>
            </div>
        </nav>

        <div class="container">
            <!-- 使用 v-if 避免在 currentDirection 为空时渲染 -->
            <div class="section-title" v-if="currentDirection.directionName">
                <div class="content">
                    <h1>{{ currentDirection.directionName }}</h1>
                    <h2>{{ currentDirection.directionCode?.split("_").join(" ") }}</h2>
                </div>
            </div>
            <main>
                <!-- 同样，在 content 存在时才渲染，并用 v-html -->
                <div class="desc" v-if="currentDirection.description" v-html="sanitizeHTML(currentDirection.description)"></div>
                <!-- 可以添加一个加载状态 -->
                <div class="loading" v-else>加载中...</div>
            </main>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import DOMPurify from "dompurify";
import { listDirection } from "@/api/directionSys/direction";

// 1. 响应式状态定义
const direction = ref([]); // 初始化为空数组
const route = useRoute();
const router = useRouter(); // 引入 router 用于更新 URL

// 从路由参数初始化选中的方向代码
const directionCode = ref(route.query?.name);

// 2. 计算属性，获取当前选中的方向
const currentDirection = computed(() => {
    // 如果找不到，返回一个空对象，避免后续访问属性时报错
    return direction.value.find(item => item.directionCode === directionCode.value) ?? {};
});

// 3. 方法定义
const handleClickDirection = (item) => {
    // 更新响应式状态
    directionCode.value = item.directionCode;
    // 更新路由参数，使 URL 与状态同步
    router.push({
        path: route.path, // 保持当前路径
        query: { ...route.query, name: item.directionCode } // 更新 name 查询参数
    });
};

// 使用 DOMPurify 净化 HTML
const sanitizeHTML = (html) => {
    // 处理 html 为 null 或 undefined 的情况
    return html ? DOMPurify.sanitize(html) : ''
};

// 4. 生命周期钩子
onMounted(async () => {
    try {
        const res = await listDirection()
        direction.value = res.rows
        console.log(direction)
        // 如果路由上有指定的方向，但数据里没有，或者路由上没有方向，则选中第一个
        if (!direction.value.some(item => item.directionCode === directionCode.value) || !directionCode.value) {
            const defaultDirection = direction.value[0];
            if (defaultDirection) {
                directionCode.value = defaultDirection.directionCode;
                // 同步更新 URL
                router.push({
                    path: route.path,
                    query: { ...route.query, name: defaultDirection.directionCode }
                });
            }
        }
    } catch (error) {
        console.error("获取研究方向列表失败:", error);
        // 可以在这里添加用户友好的错误提示
    }
});
</script>

<style scoped lang="scss">
/* ... 你的样式代码保持不变 ... */
.top-image {
  width: 100%;
  height: 250px;
  background-image: url("@/assets/images/header-bg.jpg");
  background-size: cover;
  background-position: center top;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.research-direction {
    --primary-color: #9a0001;
    --secondary-color: #bfbfbf;
    .hero {
        height: 475px;
        background: url("../../assets/images/res-d.jpg") no-repeat center center/cover;
    }
    .title {
        position: relative;
        top: -20px;
        z-index: 2;
        width: 597px;
        height: 90px;
        background: url("../../assets/images/t-bg.png") no-repeat left center;
        display: flex;
        justify-content: center;
        align-items: center;
        h1 {
            width: fit-content;
            font-size: 32px;
            color: #fff;
            font-weight: bold;
        }
    }
    nav {
        position: relative;
        top: -90px;
        z-index: 1;
        height: 90px;
        background-color: #eeeeee;
        .inner {
            height: 100%;
            max-width: 1600px;
            margin: 0 auto;
            .list {
                height: 100%;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                gap: 40px;
                .item {
                    position: relative;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 0 10px;
                    font-size: 22px;
                    color: #333;
                    border-bottom: 4px solid transparent;
                    cursor: pointer;
                    z-index: 999;

                    &:hover {
                        font-weight: bold;
                        color: var(--primary-color);
                        border-bottom-color: var(--primary-color);
                    }
                    &.active {
                        font-weight: bold;
                        color: var(--primary-color);
                        border-bottom-color: var(--primary-color);
                    }
                }
            }
        }
    }
    .container {
        max-width: 1600px;
        margin: 0 auto;
        .section-title {
            .content {
                padding-left: 30px;
                border-left: 4px solid var(--primary-color);
                h1 {
                    font-size: 32px;
                    font-weight: 500;
                    color: var(--primary-color);
                }
                h2 {
                    color: var(--secondary-color);
                    text-transform: uppercase;
                }
            }
        }
        main {
            padding: 100px 0;
            max-width: 1200px;
            margin: 0 auto;
            /* 注意：这里的 nav 样式可能与上面的全局 nav 冲突，因为 scoped 样式只对直接子元素生效，但如果内部还有 nav，最好加个类名区分 */
            .desc {
              /* 可以给内容区域加一些基础样式，比如字体、行高 */
              font-size: 16px;
              line-height: 1.6;
              color: #333;
            }
            .loading {
              text-align: center;
              padding: 50px;
              color: #666;
            }
        }
    }
}
</style>